<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="laypage/1.2/skin/laypage.css">
</head>
<div class="container" >
    <div class="page-header">
        <h2>管理列表信息</h2>
    </div>
    <div id="content"></div>
    <div id="page" style="text-align: center"></div>
</div>
<body>
<script id="template" type="x-tmpl-mustache">
    {{#items}}
    <div class="media">
      <div class="media-left">
        <a href="#">
          <img class="media-object" data-src="holder.js/64x64" alt="64x64" src="" data-holder-rendered="true" style="width: 64px; height: 64px;">
        </a>
      </div>
      <div class="media-body">
        <h4 class="media-heading">Media heading</h4>
        Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
      </div>
    </div>
    {{/items}}
</script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="https://cdn.bootcss.com/mustache.js/2.3.0/mustache.js"></script>
<script src="../../lib/web/ajax/AjaxUtils.js"></script>
<script src="../../lib/web/pager/PagerUtils.js"></script>
<script src="laypage/1.2/laypage.js"></script>

<script>
    $(document).ready(function () {
        function renderTemplate(resp){
            var html="";
            var template = $('#template').html();
            Mustache.parse(template);   // optional, speeds up future uses
            var rendered = Mustache.render(template, {items: resp.data.list});
            $("#content").html(rendered);
        }



        var config = {
            "url":"data/page.json",
            "param":{"a.b":"1234"},
            "initDataCallBack":function (resp) {
                renderTemplate(resp)
            },
            "getMoreDataCallBack":function (resp) {
                renderTemplate(resp)
            }
        }
        var pager = new PagerUtils(config)
        pager.init();
    })
</script>
</body>
</html>